<template>
  <p> key属性添加到 v-for中</p>
  <div>
    <p v-for="(item, index) of names" :key='index'>{{ item }}</p>
  </div>
  <div v-for="item in result" :key="item.id">
    <p>{{ item.title }}</p>
    <img :src="item.avator" alt="">
  </div>
</template>
<script>
export default {
  data() {
    return {
      names: ['百战程序员', '尚学堂', 'IT']
      , result:
        [
          {
            'id': 22
            , 'title': '鄂尔多斯'
            , 'avator': 'https://p11-sign.douyinpic.com/obj/tos-cn-i-3jr8j4ixpe/oItURPACEhjpg7AADak84zKCfI06CtANgCEfDh?lk3s=9698d6d2&x-expires=1762171200&x-signature=YGJEoLkdzlcIXrqbMKVjzdvHnj8%3D&from=2526598866&s=im_2&se=false&sc=image&biz_tag=aweme_im&l=02173063861820400000000000000000000ffff0ad2ca1ab2b8d0'
          }
          , {
            'id': 40
            , 'title': '成都'
            , 'avator': 'https://p11-sign.douyinpic.com/obj/tos-cn-i-3jr8j4ixpe/oItURPACEhjpg7AADak84zKCfI06CtANgCEfDh?lk3s=9698d6d2&x-expires=1762171200&x-signature=YGJEoLkdzlcIXrqbMKVjzdvHnj8%3D&from=2526598866&s=im_2&se=false&sc=image&biz_tag=aweme_im&l=02173063861820400000000000000000000ffff0ad2ca1ab2b8d0'
          }
          , {
            'id': 90
            , 'title': '北极'
            , 'avator': 'https://p11-sign.douyinpic.com/obj/tos-cn-i-3jr8j4ixpe/oItURPACEhjpg7AADak84zKCfI06CtANgCEfDh?lk3s=9698d6d2&x-expires=1762171200&x-signature=YGJEoLkdzlcIXrqbMKVjzdvHnj8%3D&from=2526598866&s=im_2&se=false&sc=image&biz_tag=aweme_im&l=02173063861820400000000000000000000ffff0ad2ca1ab2b8d0'
          }
        ]
    }
  }
}
</script>